{% extends "special_menu.html" %}
{% load i18n %}
{% block content %}
   <div class="div_box">
       <h1>{% trans '实时监控' %}</h1>
       <div id="id_showTbl" style="height: 400px;overflow:auto;">
           <table border="0" cellpadding="0" cellspacing="0">
               <tr>
                   <td style="vertical-align:top;border:0px;">
                       <div>
                           <table class="table">
                               <thead><tr>
                                    <th width="15%">{% trans '人员编号' %}</th>
                                    <th width="12%">{% trans '打卡时间' %}</th>
                                    <th width="13%">{% trans '考勤状态' %}</th>
                                    <th width="12%">{% trans '验证方式' %}</th>
                                    <th width="12%">{% trans 'Work Code' %}</th>
                                    <th width="12%">{% trans '设备名称' %}</th>
                                    <th width="12%">{% trans '设备序列号' %}</th>
                                    <th width="12%">{% trans '区域名称' %}</th>
                               </tr></thead>
                               <tbody id="rt_content">
                                    <tr class="displayN"></tr>
                               </tbody>
                           </table>
                       </div>
                   </td>
                   <td></td>
               </tr>
           </table>
       </div>
   </div>
{% endblock %}
{% block getdatalist %}
{% endblock %}
{% block addjs %}
    var eventClientId = "eventData" + new Date().getTime();
    function RenderFont(data){
        if(data){
            var content = "";
            for(var i=0; i < data.length; i++){
                var r = data[i];
                content +=''
                 +'<tr>'
                 +'  <td width="15%">'+r.pin+'</td>'
                 +'  <td width="15%">'+r.checktime+'</td>'
                 +'  <td width="13%">'+r.checktype+'</td>'
                 +'  <td width="15%">'+gettext(r.verifycode)+'</td>'
                 +'  <td width="15%">'+r.workcode+'</td>'
                 +'  <td width="15%">'+r.device_name+'</td>'
                 +'  <td width="15%">'+r.sn+'</td>'
                 +'  <td width="15%">'+r.area+'</td>'
                 +'</tr>';
            }
            $("#rt_content tr:eq(0)").after(content);
        }
    };
    function GetMonitorData(url){
        $.ajax({
            url:url,
            type:"Get",
            dataType:"json",
            async: true,
            success: function(data){
                RenderFont(data);
                window.setTimeout('Refresh()', 1500)
            },
            error: function(){
                window.setTimeout('Refresh()', 1500)
            },
            complete: function (XHR, TS) {
                XHR = null;
            }
        });
    };
    function Refresh(){
        $("#id_page_load").remove();
        if($("#rt_content tr").length > 50){
           $("#rt_content tr:gt(50)").remove();
        }
        var url = '/{{request.surl}}iclock/fetch_monitor_data/?eventClientId='+eventClientId;
        GetMonitorData(url);
    }
    window.setTimeout('Refresh()', 1000);//第一次刷新等1s执行刷新函数
{% endblock %}